<template>
  <div class="Movies">
    <h2>指定字符长度的电影列表</h2>
    <ul>
      <li v-for="item of myMovieList" :key="item.tvId">
        {{ item.albumName }}
      </li>
    </ul>
    <h2>传参字符长度的电影列表</h2>
    <ol>
      <li v-for="item of yourMovieList" :key="item.tvId">
        {{ item.albumName }}
      </li>
    </ol>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Movies",
  mounted() {
    //console.log(this);
  },
  computed: {
    //mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
    //如果你想将一个 getter 属性另取一个名字，使用对象形式：
    ...mapGetters(["myMovieList"]),
    // myMovieList() {
    //   return this.$store.getters.myMovieList;
    // },
    yourMovieList() {
      return this.$store.getters.yourMovieList({ start: 5, over: 7 });
    },
  },
};
</script>

<style scoped>
.Movies {
  width: 300px;
  margin: 0 auto;
  background-color: seagreen;
}
</style>
